<template>
	<div>
		<!-- <el-button type="primary" icon="el-icon-setting" @click="handleOpen">配置快捷菜单</el-button> -->
		<el-dialog title="配置快捷菜单" :visible.sync="dialogVisible" width="800px" append-to-body>
			<div class="menu-wrap">
				<div class="left-menu">
					<div class="title">所有菜单</div>
					<div class="menu-list">
						<el-collapse v-model="activeNames">
							<el-collapse-item v-for="(item, index) in menuList" :key="item.id" :name="index">
								<template slot="title">
									<span class="menu-name">{{ item.name }}</span>
								</template>
								<ul>
									<li v-for="v in item.childList" :key="v.id">
										<p class="name">{{ v.name }}</p>
										<el-button
											icon="el-icon-plus"
											class="btn-add"
											:disabled="tableData.findIndex((m) => v.id == m.code) > -1"
											type="text"
											@click="handleAdd(v)"
										></el-button>
									</li>
								</ul>
							</el-collapse-item>
						</el-collapse>
					</div>
				</div>
				<div class="right-menu">
					<div class="title">展示菜单 ({{ tableData.length }})</div>
					<div class="menu-list">
						<el-empty v-show="!tableData.length" description="暂无数据"></el-empty>
						<ul>
							<li v-for="(item, index) in tableData" :key="item.id">
								<p class="name">{{ item.name }}</p>
								<el-button icon="el-icon-delete" class="btn-add" type="text" @click="handleDelete(index)"></el-button>
								<el-button
									icon="el-icon-bottom"
									class="btn-add"
									:disabled="index == tableData.length - 1"
									type="text"
									@click="handleMoveDown(index)"
								></el-button>
								<el-button icon="el-icon-top" class="btn-add" :disabled="index == 0" type="text" @click="handleMoveUp(index)"></el-button>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleSubmit()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data() {
		return {
			dialogVisible: false,
			activeNames: [],
			menuList: [],
			listQuery: {
				page: 1,
				limit: 99,
				type: 'quick',
				createBy: undefined
			},
			tableData: []
		};
	},
	mounted() {
		this.menuList = this.$store.getters.menuData;
		this.$bus.$on('showQuickMenu', () => {
			this.handleOpen();
		});
	},
	beforeDestroy() {
		this.$bus.$off('showQuickMenu');
	},
	methods: {
		//获取列表
		async getList() {
			this.listQuery.createBy = this.$store.getters.userId;
			let res = await this.$store.dispatch('querySysColumnControl', this.listQuery);
			this.tableData = res.data;
		},
		//打开设置
		handleOpen() {
			this.getList();
			this.dialogVisible = true;
		},
		//提交
		async handleSubmit() {
			const loading = this.$loading({
				lock: true,
				text: '数据加载中...',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			//清除已有数据
			await this.$store.dispatch('deleteByTypeSysColumnControl', 'quick');
			this.tableData.forEach((item, index) => {
				item.orderBy = index;
			});
			//新增数据
			await this.$store.dispatch('addBatchSysColumnControl', this.tableData);
			this.$bus.$emit('refreshQuickMenuList');
			setTimeout(() => {
				loading.close();
				this.successMsg('操作成功');
				this.dialogVisible = false;
				this.tableData = [];
			}, 300);
		},
		//新增
		handleAdd(item) {
			let { id } = item;
			let idx = this.tableData.findIndex((v) => v.code == id);
			if (idx == -1) {
				let obj = this.swapData(item);
				this.tableData.push(obj);
			}
		},
		//删除
		handleDelete(index) {
			this.tableData.splice(index, 1);
		},
		//上移
		handleMoveUp(index) {
			this.swapArray(this.tableData, index - 1, index);
		},
		//下移
		handleMoveDown(index) {
			this.swapArray(this.tableData, index, index + 1);
		},
		//数组元素互换位置
		swapArray(arr, index1, index2) {
			arr[index1] = arr.splice(index2, 1, arr[index1])[0];
			return arr;
		},
		//设置数据
		swapData(obj) {
			let { id, icon, name, url } = obj;
			return {
				code: id,
				content: undefined,
				extFiled: undefined,
				field1: icon,
				field2: url,
				field3: undefined,
				isShow: 0, //0-展示，1-不显示
				name,
				orderBy: undefined,
				type: 'quick'
			};
		}
	}
};
</script>
<style scoped lang="scss">
.menu-wrap {
	min-height: 500px;
	.left-menu {
		float: left;
		width: 45%;
		height: 500px;
		border: 1px solid #ddd;
	}
	.right-menu {
		float: right;
		width: 50%;
		height: 500px;
		border: 1px solid #ddd;
	}
	.title {
		height: 40px;
		line-height: 40px;
		text-indent: 10px;
		font-size: 16px;
		color: #333;
		font-weight: bold;
		background: #eee;
	}
	.menu-name {
		text-indent: 10px;
		font-size: 16px;
		color: #333;
	}
	.menu-list {
		height: calc(500px - 40px);
		overflow: auto;
		ul {
			li {
				padding: 0 10px;
				height: 40px;
				line-height: 40px;
				border-bottom: 1px dashed #eee;
				overflow: hidden;
				transition: all 0.3s;
				&:hover {
					background: #fafafa;
				}
				.name {
					float: left;
					color: #666;
				}
				.btn-add {
					float: right;
					margin: 0 5px;
				}
			}
		}
	}
}
</style>
